<template>
	<u-popup :model-value="props.show" mode="bottom" @close="close">
		<view class="pop">
			<view class="pop-title">登录后体验更多功能</view>
			<view class="pop-title2">99%+用户选择使用微信头像和昵称</view>
			<view class="flex flex-dir-c flex-ai-c">
				<view class="avatar">
					<button class="avatar-wrapper flex flex-jc-c" open-type="chooseAvatar" @chooseavatar="chooseImg">
						<i-icon icon="icon-Avatar" size="100rpx" v-if="!avatar" />
						<view style="margin-bottom: 10rpx;" v-else>
							<u-image width="100rpx" height="100rpx" :src="avatar"></u-image>
						</view>
					</button>
					点击上传头像
				</view>
				<view class="name">
					<input @blur="onNicknameBlur" v-model="nickname" class="button" type="nickname" placeholder="点击获取昵称" />
				</view>
				<!-- @getphonenumber="formSubmit"  open-type="getPhoneNumber"-->
				<button @tap="login" v-if="radioShow && nickname && avatar"
					 class="login" type="primary" formType="submit">
					<view class="flex flex-ai-c flex-jc-c" style="color: #fff;">立即登录</view>
				</button>
				<button @tap="login" v-else
					class="login" type="primary" formType="submit">
					<view class="flex flex-ai-c flex-jc-c" style="color: #fff;">立即登录</view>
				</button>
				<!-- <view class="login" @click="login" v-if="radioShow">立即登录</view> -->
				<!-- <view class="login" @click="login" v-else>立即登录</view> -->
				
				<view class="flex flex-jc-c flex-ai-c font-22 mt-30">
					<radio :checked="radioShow" color="#FF0000" @click="changeRadio" style="transform:scale(0.7)"></radio>
					<view style="color: #999999;">
						阅读并同意和<text @click="skip(0)" style="color: #333333;">《奢董会用户协议》</text>和<text @click="skip(1)" style="color: #333333;">《奢董会隐私政策》</text>
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup lang="ts">
	import user from '../api/user.js'
	import common from '../api/common.js'
	import { ref,onMounted } from 'vue';
	interface Props {
		show ?: boolean
	}
	const props = withDefaults(defineProps<Props>(), {
		show: false
	})
	let radioShow = ref(false)
	const emit = defineEmits(['close','login'])
	let nickname = ref('')
	let avatar = ref('')
	const close = () => {
		emit('close')
	}
	const onNicknameBlur = e => {
		nickname.value = e.detail.value
	}
	const skip = (type: number) => {
		uni.navigateTo({
			url: `/pages/common/sysconfig?type=${type}`
		})
	}
	const changeRadio = () => {
		radioShow.value = !radioShow.value
	}
	const formSubmit = async (e: any) => {
		if (!e.detail.code) {
			
			return
		}
		const res = await user.getPhoneNumber({
			code: e.detail.code
		})
		if(res.code == 200) {
			uni.setStorageSync('userInfo',res.data.userInfo)
		}
	}
	const login = async () => {
		if(!nickname.value) return showToast('请填写昵称')
		if(!avatar.value) return showToast('请上传头像')
		if(!radioShow.value) return showToast('请勾选并阅读用户协议')
		uni.showLoading({
			title: '登录中...'
		});
		wx.login({
			success: (res) => {
				if (res.code) {
					uni.getSetting({
						success(res3) {
							if (!res3.authSetting['scope.userInfo']) {
								uni.authorize({
									scope: 'scope.userInfo',
									success() {
										wx.getUserInfo({
											success: function (res2) {
												authLogin(res.code)
											}
										});
									}
								});
							} else {
								wx.getUserInfo({
									desc: '获取用户信息',
									success: function (res2) {
										authLogin(res.code)
									},
									fail: function (err) {
									}
								});
							}
						}
					});
				} else {
					showToast('授权失败');
				}
			}
		});
	}
	const authLogin = (code: any) => {
		user.login({
			code,
			nickname: nickname.value,
			avatar: avatar.value
		}).then((res: any) => {
			if(res.code === 200) {
				uni.setStorageSync('from',{
					nickname: nickname.value,
					avatar: avatar.value
				})
				uni.setStorageSync('token', res.data.token);
				emit('login',res.data.token)
				emit('close')
			}else {
				showToast(res.msg);
			}
			
			uni.hideLoading()
		})
	}
	const chooseImg = async (e) => {
		const {
			avatarUrl
		} = e.detail
		const res = await common.upload(avatarUrl)
		avatar.value = res.data.domain_url
	}
	const showToast = (title : any = '', icon: any = 'none') => {
		uni.showToast({
			title: title,
			icon: icon
		})
	}
	onMounted(() => {
		let from = uni.getStorageSync('from')
		if(from) {
			nickname.value = from.nickname
			avatar.value = from.avatar
		}
	})
</script>

<style lang="scss" scoped>
	.avatar {
		button {
			font-size: 28rpx;
			font-weight: 300;
			color: #999999;
			padding: 0;
			margin-right: 8rpx;
			background: none;
		}
	}

	button::after {
		border: 0 !important;
	}

	@mixin initStyle($color: #000, $background: #F2F2F2, ) {
		width: 626rpx;
		height: 87rpx;
		background: $background !important;
		border-radius: 44rpx;
		border: 0 !important;
		color: $color !important;
		font-weight: 600 !important;
		font-size: 30rpx !important;
	}

	.pop {
		padding-bottom: 150rpx;

		.pop-title {
			padding: 45rpx 0 0 45rpx;
			font-weight: 500;
			font-size: 29rpx;
			color: #000000;
		}

		.pop-title2 {
			padding: 16rpx 0 95rpx 45rpx;
			font-weight: 400;
			font-size: 23rpx;
			color: #333333;
		}
	}

	.name {
		.button {
			@include initStyle();
			text-align: center;
			margin: 40rpx 0
		}
	}

	.login {
		@include initStyle(#fff, #000);
		text-align: center;
		line-height: 87rpx;
	}
</style>